@import "./media";
@import "./element-ui";
@import "./font";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

}
html body #app{
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #0e222e;
  font-family: Inter,sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: .01rem;
}

.online {
  background: linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%),#86DD89 !important;
}
.offline {
  background: linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%),red !important;
}
.icon-button {
  margin-right: 2px;
  display: flex;
  gap: min(0.571rem,0.417vw);
  align-items: center;
  justify-content: center;
  width: min(11.143rem,8.125vw);
  height: min(3.429rem,2.5vw);
  cursor: pointer;
  border-radius: min(0.571rem,0.417vw);
  color: #dfdfdf;
  font-size: min(1rem,.729vw);
  font-weight: 600;
  background-color: #193343;
  &:hover {
    background-color: #164c64;
  }
  &.border {
    outline: 1px solid #4D6171;
    background-color: #122a3a;
    &:hover {
      outline: 1px solid #ffffff;
      background-color: #193343;
    }
  }
  &.disabled {
    cursor: default;
    background-color: #354552;
    color: #848383d4;
    &:hover {
      background-color: #354552;
    }
  }
  &.active {
    outline: 1px solid #51ACCC;
    color: #51accc;
    &:hover {
      background-color: transparent !important;
    }
  }
}
.message-emojis-popover {
  min-width: initial !important;
  width: initial !important;
  height: min(20.714rem,15.104vw) !important;
  padding: min(1.071rem,0.781vw) min(0.714rem,0.521vw) !important;
  border-radius: min(0.714rem,0.521vw);
  background: #233645;
  box-shadow: 0 0.286rem 0.714rem #00000026;
  border: none;
  .popper__arrow,
  .popper__arrow::after {
    border-top-color: #233645 !important;
  }
  .message-emojis-list {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    justify-content: center;
    row-gap: min(0.714rem,0.521vw);
    scrollbar-gutter: stable;
    font-size: min(1.714rem,1.25vw);
    grid-template-columns: repeat(6,auto);
    .emojis-item {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      height: min(1.714rem,1.25vw);
    }
  }
}
.message-sticker-popover {
  min-width: initial !important;
  width: initial !important;
  height: min(20.714rem,15.104vw) !important;
  padding: min(1.071rem,0.781vw) min(0.714rem,0.521vw) !important;
  border-radius: min(0.714rem,0.521vw);
  background: #233645;
  box-shadow: 0 0.286rem 0.714rem #00000026;
  border: none;
  .popper__arrow,
  .popper__arrow::after {
    border-top-color: #233645 !important;
  }
  .message-sticker-list {
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    justify-content: center;
    row-gap: min(0.714rem,0.521vw);
    width: 100%;
    height: 100%;
    padding-right: min(0.714rem,0.521vw);
    scrollbar-gutter: stable;
    column-gap: min(0.714rem,0.521vw);
    grid-template-columns: repeat(3,auto);
    .sticker-item {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(3.929rem,2.865vw);
      height: min(3.929rem,2.865vw);
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.el-dialog {
  display: block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 1.07rem!important;
  background: #233645!important;
  box-shadow: 0 2.28rem 1.36rem -.86rem #00000040!important;
  padding: min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw));
  .el-dialog__headerbtn {
    top: 10px;
  }
  .el-dialog__body {
    padding: 0;
    color: #f1f1f1;
  }
}
.el-message-box {
  border: none;
  max-width: 80vw;
  position: static;
  padding: 1.429rem 1.714rem;
  background: rgb(14,34,46)!important;
  box-shadow: 0 2.28rem 1.36rem -.86rem #00000040!important;
  .el-message-box__header {
    display: none;
  }
  .el-message-box__message {
    text-align: center;
    color: #ffffff;
  }
  .el-message-box__btns {
    display: flex;
    gap: 0.714rem;
    align-items: center;
    font-family: Manrope,sans-serif;
    .el-button {
      flex: 1;
    }
    .el-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(18rem,12.734vw);
      height: min(3.429rem,2.5vw);
      cursor: pointer;
      border: 1px solid rgba(148,244,255,.56);
      border-radius: 0.571rem;
      background-color: #2f677e52;
      border: 1px solid #2F677E;
    }
  }
}

::-webkit-scrollbar {
  width: 0.429rem !important;
}
::-webkit-scrollbar-thumb {
  background-color: #2c5361;
  height: 10rem!important;
  border-radius: 1.786rem!important;
}
::-webkit-scrollbar-track {
  background-color: #0e222e;
}
.el-table {
  ::-webkit-scrollbar {
    width: 0.429rem !important;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #2c5361;
    height: 10rem!important;
    border-radius: 1.786rem!important;
  }
  ::-webkit-scrollbar-track {
    background-color: #0e222e;
  }
}